<template>
  <label class="cl-checkbox" :class="{'is-disabled': isDisabled, 'is-indeterminater': isIndeterminater}">
    <span class=“cl-checkbox__inner></span>
    <input type="checkbox" v-model="store" class="cl-checkbox__original" :disabled="isDisabled" />
    <span class="cl-checkbox__label"><slot></slot></span>
  </label>
</template>

<script>
export default {
  name: 'Checkbox',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    indeterminater: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isDisabled () {
      return this.disabled
    },
    isIndeterminater () {
      return this.value ? false : this.indeterminater
    },
    store: {
      get (){
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<style lang="scss">
@mixin appearance($value) {
  -o-appearance: $value;
  -moz-appearance: $value;
  -webkit-appearance: $value;
  box-shadow: $value;
}

.cl-checkbox {
  cursor: pointer;
  &.is-disabled {
    cursor: no-drop;
  }
  &.is-indeterminater .cl-checkbox__original {
    background-color: #3083F2;
    border-color: #3083F2;
    &::after {
      display: block;
      text-align: center;
      font-size: 12px;
      line-height: 12px;
      color: #fff;
      content: '\2013'
    }
  }
}
.cl-checkbox__original {
  width: 12px;
  height: 12px;
  margin: 0;
  vertical-align: middle;
  border: 1px solid #C3C6D6;
  border-radius: 2px;
  outline: none;
  @include appearance(none);
  &:checked {
    border-color: #3083F2;
    &::after {
      display: block;
      content: '\2713';
      text-align: center;
      font-size: 12px;
      line-height: 12px;
      color: #3083F2;
    }
  }
  &[disabled="disabled"] {
    border-color: #aaa !important;
    background-color: #bbb !important;
    &::after {
      color: #fff;
    }
  }
}
.cl-checkbox__label {
  color: #4B4F58;
  font-size: 14px;
  line-height: 20px;
  vertical-align: middle;
}
</style>
